import React from 'react';
import {Card} from 'antd';
import echartTheme from '../themeLight';
// import echarts from 'echarts'; 全部导入
import echarts from 'echarts/lib/echarts'; //按需导入

// 导入折线图
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import ReactEcharts from 'echarts-for-react'

export default class Line extends React.Component {

    componentWillMount() {
        echarts.registerTheme('hyyqc', echartTheme)
    };

    getOption = () => {
        let option = {
            title: {
                text: '用户骑行订单'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data: [
                    '周一',
                    '周二',
                    '周三',
                    '周四',
                    '周五',
                    '周六',
                    '周日'
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单量',
                    type: 'line',
                    data: [
                        1000,
                        2000,
                        1500,
                        3000,
                        2000,
                        1200,
                        800
                    ]
                }
            ]
        };
        return option
    };

    getOption2 = () => {
        let option = {
            title: {
                text: '用户骑行订单'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
              data:['ofo订单量','mobike订单量']
            },
            xAxis: {
                data: [
                    '周一',
                    '周二',
                    '周三',
                    '周四',
                    '周五',
                    '周六',
                    '周日'
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'ofo订单量',
                    type: 'line',
                    data: [
                        1200,
                        4000,
                        1500,
                        3000,
                        6700,
                        8200,
                        9000
                    ]
                },
                {
                    name: 'mobike订单量',
                    type: 'line',
                    data: [
                        1000,
                        2000,
                        1800,
                        2700,
                        2000,
                        1200,
                        800
                    ]
                },
            ]
        };
        return option
    };

    getOption3 = () => {
        let option = {
            title: {
                text: '用户骑行订单'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type:"category",
                boundaryGap:false,
                data: [
                    '周一',
                    '周二',
                    '周三',
                    '周四',
                    '周五',
                    '周六',
                    '周日'
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'ofo订单量',
                    type: 'line',
                    data: [
                        1200,
                        4000,
                        1500,
                        3000,
                        6700,
                        8200,
                        9000
                    ],
                    areaStyle:{}
                },
            ]
        };
        return option
    };

    render() {
        return (
            <div className="wrap">
                <Card title="折线图表之一">
                    <ReactEcharts option={this.getOption()} theme="hyyqc" style={{height: 500}}/>
                </Card>
                <Card title="折线图表之二" style={{marginTop: 20}}>
                    <ReactEcharts option={this.getOption2()} theme="hyyqc" style={{height: 500}}/>
                </Card>
                <Card title="折线图表之三" style={{marginTop: 20}}>
                    <ReactEcharts option={this.getOption3()} theme="hyyqc" style={{height: 500}}/>
                </Card>
            </div>
        )
    }
}